<template>
  <div>
    <div id="backtestnav" style="padding-top:85px;">
      <!-- <div id="strategynav">
        <div style="margin-left: 20px;margin-top: 7px;display:flex;flex-direction: row">
          <i class="iconfont icon-fanhui"></i>
          <div style="font-size:20px;">{{strategy_name}}</div>
        </div>
        <div id="strategynav_right">
          <div style="font-size:18px;margin-right:10px;" class="nav_right" @click="bianjicelue">编辑策略</div> -->
          <!--<a>回测详情</a>-->
          <!-- <div style="font-size:18px;margin-right:10px;" class="active nav_right">回测列表</div>
        </div>
      </div> -->

      <div id="backtestlist">
        <div id="backtesttop">
          <h4 style="float: left;">回测列表</h4>
          <div style="float: right;">
            <span class="glyphicon glyphicon-search" style="display: inline"></span>
            <input
              type="text"
              placeholder="策略名称"
              class="form-control"
              v-model="keyword"
              id="search"
              @change="getbacketestList"
              style="display: inline"
            />
          </div>
        </div>
        <table id="strategyTable" class="table table-hover" style>
          <thead>
            <tr>
              <td width="10%" align="center">#</td>
              <td width="20%" align="center">策略名称</td>
              <td width="30%" align="center">时间范围</td>
              <td width="20%" align="center">策略收益</td>
              <td width="20%" align="center">操作</td>
            </tr>
          </thead>

          <tbody>
            <tr v-for="item in backetestList" :key="item.id">
              <td align="center">{{item.id}}</td>
              <td class="contentmore" align="center" @click="strategydetail(item.id)">
                <span>{{item.strategyName}}</span>
              </td>
              <td align="center">{{item.starttime}}-{{item.endtime}}</td>
              <td align="center">{{item.profit}}</td>
              <td align="center">
                <i class="iconfont icon-zhexiantutongji" @click="strategydetail(item.id,item.strategyid)"></i>
                <!-- <span class="glyphicon glyphicon-trash" @click.prevent="strategyDelete(item.id)"></span> -->
                <i class="iconfont icon-delete" @click.prevent="strategyDelete(item.id)"></i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<style scoped>
.contentmore{
  cursor: pointer;
}
.contentmore:hover{
  color: #337ab7;
  text-decoration:underline;
}
/*回测nav*/
.nav_right:hover{
    color: #337ab7;
}
.iconfont{
  font-size: 25px;
}
#strategynav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height:60px;
  align-items: center;
}
.active {
  color: #255da8;
  border-bottom: 4px solid #255da8;
}
#strategynav_right {
  display: flex;
  flex-direction: row;

}
#strategynav_right a {
  padding-right: 8px;
  padding-bottom: 5px;
  margin-top: 7px;
}

#backtestlist {
  padding: 20px;
  padding-left: 80px;
  padding-right: 80px;
}

.glyphicon-search {
  width: 35px;
  height: 35px;
  padding-top: 10px;
  text-align: center;
  margin-bottom: 3px;
  color: #e8ecf0;
}
.form-control {
  border: solid 1px #e8ecf0;
  width: 200px;
}
</style>
<script>
export default {
  data() {
    return {
      keyword: '',
      backetestList:'',
      SessionToken:'',
      userId:'',
      Current: 1,
      limit: 10,
    };
  },
  mounted(){
    this.SessionToken = localStorage.getItem('SessionToken')
    this.userId = localStorage.getItem('Userid')
    this.getbacketestList()
  },
  methods: {
    //策略删除
    strategyDelete(id) {
      this.$http.post('deleteBackTest?sessionToken='+this.SessionToken+'&testRecordId='+id+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.getbacketestList()
          this.$message.success('删除成功')
          // this.stocknumberList = resp.data.data
        } else {
          this.$message(resp.data.msg)
        }
      })
    },
    getbacketestList(){
      this.$http.get('inquireBackTestList?sessionToken='+this.SessionToken+'&userId='+this.userId+'&pageIndex='+this.Current+'&pageSize='+this.limit+'&strategyId=&strategyName='+this.keyword+'&startTime=&endTime=').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.backetestList = resp.data.data.list

          // this.stocknumberList = resp.data.data
        } else {
          this.$message(resp.data.msg)
        }
      })
    },
    //策略显示
    search(keywords) {
      
    },
    strategydetail(id,strategyid){
      this.$router.push('/backtest_detail')
      localStorage.setItem('backtestId',id)
      localStorage.setItem('strategyId',strategyid)
    }
  }
};
</script>